<script setup>
import { reactive, onMounted,computed } from "vue";
import { useDeleteChatUser } from "@/hooks/home-hook";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import * as moment from 'moment';

moment.locale('zh-cn');

const store = useStore();

const chats = computed(()=>{
   return store.state.notify.nowChats;
})

const D = reactive({
  route: useRoute(),
  router: useRouter(),
  isNavigator: false,
  searchValue: "",
});

const delete_chat_user = useDeleteChatUser;

const navigatorBefore = () => (D.isNavigator = true);

const navigator = () => (D.isNavigator = false);

const navigatorAfter = (chatInfo) =>
  D.isNavigator
    ? D.router.push({
        path: "/chat",
        query: {
          title: chatInfo.title,
          type: chatInfo.type,
          id:chatInfo.id
        },
      })
    : "";


const filterOtherMesg = (item) => item.filter((v=>v.from==="other")) ;

</script>

<template>
  <div class="chat-wrapper">
    <van-search v-model="D.searchValue" placeholder="请输入搜索关键词" />
    <van-swipe-cell
      v-show="chats.length > 0"
      v-for="(item, index) in chats"
      :key="index"
    >
      <!-- D.router.type 还需要修改 -->
      <div
        v-if="item.messages.length > 0" 
        class="chat-item"
        @touchstart="navigatorBefore"
        @touchmove="navigator"
        @touchend="navigatorAfter(item)"
      >
        <div class="chat-avatar">
          <van-image :src="item.avatar" round width="70" height="70">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
        <div class="chat-info">
          <div class="chat-title">
            <div class="chat-title-left">{{ item.title }}</div>
            <div class="chat-title-time">
              <small>
                {{ moment(item.messages[item.messages.length - 1]["date"]).fromNow() }}
              </small>
            </div>
          </div>
          <div class="chat-last-message">
            <small>
              {{ (item.messages[item.messages.length - 1]['isEmjoi'] || item.messages[item.messages.length - 1]['isImg'] || item.messages[item.messages.length - 1]['isVideo'] || item.messages[item.messages.length - 1]['isAudio']) ?  item.messages[item.messages.length - 1]['alt'] : item.messages[item.messages.length - 1]["msg"] }}
            </small>
          </div>
          <van-badge :show-zero="false" :content="(item.messages.filter((v)=>!v.readStatus)).length" position="bottom-right">
            <div class="child" />
          </van-badge>
        </div>
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger" 
          class="delete-button"
          @click="delete_chat_user(store.state.notify.nowChats)(index)"
        />
      </template>
    </van-swipe-cell>
    <van-empty v-show="chats[0]?.messages.length <= 0 || chats.length <= 0" description="暂无聊天信息" />
  </div>
</template>

<style lang="scss" scoped>


.chat-item {
  padding-left: 10px;
  height: 80px;
  display: flex;
  &:hover {
    background-color: #eee;
  }
  .chat-avatar {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
  }
  .chat-info {
    width: 75%;
    display: flex;
    flex-direction: column;
    .chat-title-left,
    .chat-last-message {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .chat-title {
      height: 33px;
      line-height: 43px;
      display: flex;
      &-left {
        flex: 1;
      }
      &-time {
        width: 100px;
        text-align: right;
        padding-right: 10px;
        font-size: 12px;
        color: #999;
      }
    }
    .chat-last-message {
      height: 35px;
      color: #999;
    }
  }
}
.delete-button {
  height: 100%;
}
</style>
